<template>
	<view class="search-page">
		<!-- <navbar>
			<view class="search-header d-f a-i-c">
				<view class="search-input d-f a-i-c">
					<view class="slw-icon input-left">&#xe60c;</view>
					<input class="input d-f a-i-c" @input="onSearchInput" placeholder="股票搜索" />
					<view class="slw-icon input-right">&#xe832;</view>
				</view>
				<view class="search-button">
					搜索
				</view>
			</view>
		</navbar> -->
		<scroll-view class="rank-body">
			<view class="status_bar"/>
			<view class="rank-list">
				<view v-for="(item, index) in rankList" :key="index" class="rank-item">
					<view class="rank d-f a-i-c j-c-b">
						<view class="rank-left">
							<view class="rank-name">{{item.name}}</view>
							<view class="rank-code">{{item.code}}</view>
						</view>
						<view class="rank-right">
							<view v-if="item.enable" class="slw-icon confirm-icon" @click="delRank(item, index)">&#xe612;</view>
							<view v-else class="slw-icon add-icon" @click="addRank(item, index)">&#xe657;</view>
						</view>
					</view>
					<view class="x-line line"/>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const data = [
      {"name": "达华智能", "code": "002512", "enable":  true},
      {"name": "邦讯技术", "code": "300312"},
      {"name": "麦克奥迪", "code": "300541"},
      {"name": "信隆健康", "code": "002105"},
      {"name": "东南网架", "code": "002135"},
      {"name": "日科化学", "code": "300214"},
      {"name": "长春高新", "code": "00661"},
      {"name": "顺锅电子", "code": "002138"},
      {"name": "文峰股份", "code": "601010"},
      {"name": "*ST高升", "code": "000971"},
      {"name": "智慧松德", "code": "300173"},
      {"name": "露笑科技", "code": "002617"},
      {"name": "含肥百货", "code": "0041"},
      {"name": "*ST工新", "code": "600701"},
      {"name": "重庆啤酒", "code": "600132"},



        {"name": "达华智能", "code": "0a02512", "enable":  true},
        {"name": "邦讯技术", "code": "30a0312"},
        {"name": "麦克奥迪", "code": "300a541"},
        {"name": "信隆健康", "code": "0021s05"},
        {"name": "东南网架", "code": "0021s35"},
        {"name": "日科化学", "code": "300s214"},
        {"name": "长春高新", "code": "00s661"},
        {"name": "顺锅电子", "code": "002d138"},
        {"name": "文峰股份", "code": "601a010"},
        {"name": "*ST高升", "code": "0009d71"},
        {"name": "智慧松德", "code": "3a00173"},
        {"name": "露笑科技", "code": "00a2617"},
        {"name": "含肥百货", "code": "00a41"},
        {"name": "*ST工新", "code": "600d701"},
        {"name": "重庆啤酒", "code": "6001d32"}
    ]
	
	export default {
		components: {
		},
		data() {
			return {
				search: '',
				rankList: data
			}
		},
		onLoad() {
			// getRankPage().then(res => {
			// 	this.rankList = res.data.list
			// })
		},
		//	下拉刷新
		onPullDownRefresh () {
			// getRankPage().then(res => {
			// 	this.rankList = res.data.list
			// 	setTimeout(() => {
			// 		uni.stopPullDownRefresh()
			// 	}, 1500)
			// }).catch(() => {
			// 	uni.stopPullDownRefresh()
			// })
		},
		methods: {
			//	搜索事件
			onSearchInput (e) {
				this.search = e.detail.value
			},
			//	添加行情
			addRank (item, key) {
				uni.showToast({title: '添加自选股', icon: 'none', duration: 2000})
				this.$set(this.rankList, key, {...item, enable: true})
			},
			//	删除行情
			delRank (item, key) {
				uni.showToast({title: '取消自选股', icon: 'none', duration: 2000})
				this.$set(this.rankList, key, {...item, enable: false})
			}
		},
		//	当 searchInput 输入时触发
		onNavigationBarSearchInputChanged (e) {
			// let text = e.text;
			// if (!text) {
			// 	this.isHistory = true;
			// 	this.historyList = [];
			// 	this.historyList = uni.getStorageSync('search:history');
			// 	return;
			// } else {
			// 	this.isHistory = false;
			// 	this.getInputtips(text);
			// }
		},
		//	
		onNavigationBarSearchInputConfirmed (e) {
			let text = e.text;
			if (!text) {
				this.isHistory = true;
				this.historyList = [];
				this.historyList = uni.getStorageSync('search:history');
				uni.showModal({
					title: '提示',
					content: '请输入内容。',
					success: res => {
						if (res.confirm) {
						}
					}
				});
				return;
			} else {
				uni.showModal({
					title: '提示',
					content: `您输入的内容为"${text}",如果点击确定,将记录到历史搜索,并返回.如果取消不做操作`,
					success: res => {
						if (res.confirm) {
							util.setHistory(text);
							uni.navigateBack();
						}
					}
				});
			}
		},
		//	点击导航栏搜索按钮事件
		onNavigationBarButtonTap(e) {}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--window-top);
		width: 100%;
	}
	.search-page{
		height: calc(100vh - var(--window-top));
		background: #fff;
		.search-input{
			width: 580rpx;
			height: 50rpx;
			padding: 0 60rpx;
			position: relative;
			background: #f0efef;
			border-radius: 500rpx;
			.input /deep/{
				width: 100%;
				height: 100%;
				padding: 10rpx 0;
				.uni-input-placeholder{
					font-size: 24rpx;
				}
				.uni-input-input{
					font-size: 24rpx;
				}
			}
			.input-left, .input-right{
				color: #ccc;
				line-height: 1;
			}
			.input-left{
				position: absolute;
				left: 10rpx;
				font-size: 36rpx;
			}
			.input-right{
				position: absolute;
				right: 10rpx;
				font-size: 28rpx;
			}
		}
		.rank-list{
			padding: 30rpx;
			background: #fff;
			.rank-item{
				&:last-child{
					.line{display: none;}
				}
			}
			.rank{
				padding: 10rpx 20rpx 10rpx 0;
			}
			.rank-code{
				color: #999;
				font-size: 20rpx;
				margin-top: 10rpx;
			}
			.add-icon, .confirm-icon{
				font-size: 32rpx;
				line-height: 1;
			}
			.add-icon{
				color: $theme_color;
			}
			.confirm-icon{
				color: #fe7450;
			}
		}
	}
</style>
